<template lang="">
  <div class="login_container">
    <div class="login_box">
      <!-- 表单标题 -->
      <div><h2 class="form_title">{{formTitle}}</h2></div>
      <!-- 登录表单区域 -->
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-width="0" class="login_wrap">
        <!-- 用户名区域 -->
        <el-form-item prop="username">
          <el-input autocomplet="off" prefix-icon="iconfont icon-zhanghao" v-model="loginForm.username" placeholder="用户名" clearable>
          </el-input>
        </el-form-item>
        <!-- 密码区域 -->
        <el-form-item prop="password">
          <el-input autocomplet="off" prefix-icon="iconfont icon-mima" v-model="loginForm.password"  placeholder="密码" show-password>
          </el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
        </el-form-item>
      </el-form>
      <!-- 功能区域 -->
      <div class="function_bar"> 
        <el-checkbox v-model="checked" true-label=true false-label=false>记住密码</el-checkbox>
        <div class="bar_right">
          <router-link to="">忘记密码</router-link>
          <span>|</span>
          <router-link to="/user/register">新用户注册</router-link>
        </div>
      </div>
      <!-- 登录方式标题 -->
      <div class="choose_title">
        <h5><span>第三方账号登录</span></h5>
      </div>
      <!-- 登陆方式第三方选择 -->
      <div class="login_choose" @click="changeLogin()">
        <router-link to=""></router-link>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    mounted() {
      this.getCookie()
    },
    data() {
      return {
        // 表单标题
        formTitle: '登录',
        // 这是登录表单的绑定数据对象
        loginForm: {
          username: '',     /* 用户名 */
          password: ''      /* 登录密码 */
        },
        // 这是表单的验证规则对象
        loginFormRules: {
          // 验证用户名是否合法
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          // 验证密码是否合法
          password: [{
              required: true,
              message: '请输入登录密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur'
            }
          ]
        },
        // 绑定记住密码开关
        checked: false
      }
    },
    methods: {
      // 读取cookie
      getCookie: function() {
        if (document.cookie.length > 0) {
          let arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
          for (var i = 0; i < arr.length; i++) {
            let arr2 = arr[i].split("="); //再次切割
            //判断查找相对应的值
            if (arr2[0] == "username") {
              this.loginForm.username = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == "password") {
              this.loginForm.password = arr2[1];
            }
          }
        }
      },
      //设置cookie
      setCookie(c_name,c_pwd,exdate){  // 账号，密码 ，过期的天数
        const currentDate = new Date()  // 获取时间
        currentDate.setTime(currentDate.getTime() + 24 * 60 * 60 * 1000 * exdate)  //保存的天数
        window.document.cookie = "username" + "=" + c_name + ";path=/;expires=" + currentDate.toLocaleString()
        window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + currentDate.toLocaleString()
      },
      //清除cookie
      clearCookie() {
        this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
      },
      // 登录操作
      login() {
        this.$refs.loginFormRef.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.post('user/ToLogin', this.loginForm)
          if (res.code !== 200) { return this.$message.error(res.message) }
          // 判断是否保存表单信息
          if (this.checked === "true") {
            this.setCookie(this.loginForm.username,this.loginForm.password,7)
          } else {
            this.clearCookie()
          }
          this.$message.success('登录成功')
          window.sessionStorage.setItem('userid', res.data.userDto.id)
          window.sessionStorage.setItem('token', res.data.userDto.token)
          this.$router.push('/home')
        })
      },
      // 微信第三方登录
      changeLogin() {
        this.$message.error('抱歉暂未开通该功能')
      }
    },
  }

</script>
<style type="text/less" lang="less" scoped>
  .login_container {
    overflow: hidden;
    background: url('../../assets/img/login-background.jpg') no-repeat center;
    background-size: cover;
    height: 100%;
    .login_box {
      width: 450px;
      height: 420px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 8px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      flex-direction: column;
      .form_title {
        color: rgba(95, 91, 91, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .login_wrap {
        width: 100%;
        bottom: 0;
        padding: 0 35px;
        box-sizing: border-box;
      }
      .function_bar {
        width: 380px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        .bar_right {
          a {
            color: #409EFF;
            text-decoration: none;
          }
          span {
            margin: 0 10px;
          }
        }
      }
      .choose_title {
        width: 380px;
        text-align: center;
        h5 {
          color: #545454;
          font-weight: 500;
          font-size: 14px;
          margin: 20px 0;
        }
      }
      .login_choose {
        width: 30px;
        height: 30px;
        a {
          width: 100%;
          height: 100%;
          display: flex;
          background: url('../../assets/img/WeChat-icon.jpg') no-repeat center center;      
          background-size: 100% 100%;
          text-decoration: none;
          border-radius: 3px;
        }
      }
    }
  }
</style>
